<template>
  <div class="flex items-center justify-between mb-8">
    <div class="flex space-x-6">
      <button 
        class="flex items-center text-gray-600 hover:text-primary transition-colors"
        @click="handleLike"
      >
        <i class="fa fa-thumbs-up text-xl mr-2" :class="{ 'text-primary': isLiked }"></i>
        <span>点赞 ({{ likeCount }})</span>
      </button>
      <button 
        class="flex items-center text-gray-600 hover:text-primary transition-colors"
        @click="handleFavorite"
      >
        <i class="fa fa-bookmark text-xl mr-2" :class="{ 'text-primary': isFavorite }"></i>
        <span>收藏 ({{ favoriteCount }})</span>
      </button>
      <button 
        class="flex items-center text-gray-600 hover:text-primary transition-colors"
        @click="handleView"
      >
        <i class="fa fa-eye text-xl mr-2" :class="{ 'text-primary': isViewed }"></i>
        <span>在看 ({{ viewCount }})</span>
      </button>
    </div>
    
    <!-- 分享功能 -->
    <div>
      <span class="text-sm text-gray-500 mr-2">分享：</span>
      <div class="inline-flex space-x-2">
        <a href="#" class="p-2 bg-[#07C160] text-white rounded-full hover:bg-[#06B056] transition-colors" title="分享到微信" @click="handleShare('wechat')">
          <i class="fa fa-weixin"></i>
        </a>
        <a href="#" class="p-2 bg-[#E6162D] text-white rounded-full hover:bg-[#D01429] transition-colors" title="分享到微博" @click="handleShare('weibo')">
          <i class="fa fa-weibo"></i>
        </a>
        <a href="#" class="p-2 bg-[#1296DB] text-white rounded-full hover:bg-[#1087C8] transition-colors" title="分享到QQ" @click="handleShare('qq')">
          <i class="fa fa-qq"></i>
        </a>
        <a href="#" class="p-2 bg-gray-200 text-gray-700 rounded-full hover:bg-gray-300 transition-colors" title="复制链接" @click="handleCopyLink">
          <i class="fa fa-link"></i>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ArticleInteractions',
  props: {
    // 可以从父组件传入初始数据
    initialLikeCount: {
      type: Number,
      default: 245
    },
    initialFavoriteCount: {
      type: Number,
      default: 132
    },
    initialViewCount: {
      type: Number,
      default: 89
    },
    // 文章ID，用于分享和复制链接
    articleId: {
      type: String,
      default: 'default-article-id'
    }
  },
  data() {
    return {
      likeCount: this.initialLikeCount,
      favoriteCount: this.initialFavoriteCount,
      viewCount: this.initialViewCount,
      isLiked: false,
      isFavorite: false,
      isViewed: false
    }
  },
  methods: {
    handleLike() {
      if (!this.isLiked) {
        this.likeCount++;
        this.isLiked = true;
      } else {
        this.likeCount--;
        this.isLiked = false;
      }
      // 可以在这里添加API调用，将点赞状态同步到服务器
      this.$emit('like', { isLiked: this.isLiked, count: this.likeCount });
    },
    
    handleFavorite() {
      if (!this.isFavorite) {
        this.favoriteCount++;
        this.isFavorite = true;
      } else {
        this.favoriteCount--;
        this.isFavorite = false;
      }
      // 可以在这里添加API调用，将收藏状态同步到服务器
      this.$emit('favorite', { isFavorite: this.isFavorite, count: this.favoriteCount });
    },
    
    handleView() {
      if (!this.isViewed) {
        this.viewCount++;
        this.isViewed = true;
      } else {
        this.viewCount--;
        this.isViewed = false;
      }
      // 可以在这里添加API调用，将在看状态同步到服务器
      this.$emit('view', { isViewed: this.isViewed, count: this.viewCount });
    },
    
    handleShare(platform) {
      // 阻止默认行为
      event.preventDefault();
      
      // 根据平台类型执行不同的分享逻辑
      const shareUrl = window.location.href;
      const title = document.title;
      
      switch (platform) {
        case 'wechat':
          // 微信分享通常需要微信SDK，这里只是模拟
          alert('打开微信扫一扫进行分享');
          break;
        case 'weibo':
          // 构造微博分享链接
          const weiboShareUrl = `http://service.weibo.com/share/share.php?url=${encodeURIComponent(shareUrl)}&title=${encodeURIComponent(title)}`;
          window.open(weiboShareUrl, '_blank');
          break;
        case 'qq':
          // 构造QQ分享链接
          const qqShareUrl = `http://connect.qq.com/widget/shareqq/index.html?url=${encodeURIComponent(shareUrl)}&title=${encodeURIComponent(title)}`;
          window.open(qqShareUrl, '_blank');
          break;
      }
      
      // 触发分享事件
      this.$emit('share', { platform });
    },
    
    handleCopyLink() {
      // 阻止默认行为
      event.preventDefault();
      
      // 复制当前页面链接到剪贴板
      navigator.clipboard.writeText(window.location.href)
        .then(() => {
          // 显示复制成功提示
          this.$emit('link-copied');
          // 这里可以添加一个临时提示
          alert('链接已复制到剪贴板');
        })
        .catch(err => {
          console.error('无法复制链接: ', err);
        });
    }
  },
  
  // 低代码平台支持
  lowcode: {
    meta: {
      componentKey: 'article-interactions',
      displayName: '文章互动组件',
      description: '文章页面的点赞、收藏、在看和分享功能',
      category: '文章组件',
      version: '1.0.0',
      isContainer: false
    },
    
    configPanel: [{
      title: '基础配置',
      fields: [
        {
          name: 'initialLikeCount',
          label: '初始点赞数',
          type: 'number',
          defaultValue: 245
        },
        {
          name: 'initialFavoriteCount',
          label: '初始收藏数',
          type: 'number',
          defaultValue: 132
        },
        {
          name: 'initialViewCount',
          label: '初始在看数',
          type: 'number',
          defaultValue: 89
        },
        {
          name: 'articleId',
          label: '文章ID',
          type: 'text',
          defaultValue: 'default-article-id'
        }
      ]
    }],
    
    events: [
      {
        name: 'like',
        label: '点赞事件',
        description: '用户点击点赞按钮时触发',
        parameters: [{
          name: 'isLiked',
          type: 'boolean'
        },
        {
          name: 'count',
          type: 'number'
        }]
      },
      {
        name: 'favorite',
        label: '收藏事件',
        description: '用户点击收藏按钮时触发',
        parameters: {
          isFavorite: 'boolean',
          count: 'number'
        }
      },
      {
        name: 'view',
        label: '在看事件',
        description: '用户点击在看按钮时触发',
        parameters: {
          isViewed: 'boolean',
          count: 'number'
        }
      },
      {
        name: 'share',
        label: '分享事件',
        description: '用户点击分享按钮时触发',
        parameters: {
          platform: 'string'
        }
      },
      {
        name: 'link-copied',
        label: '链接复制事件',
        description: '链接成功复制到剪贴板时触发'
      }
    ],
    actions:[]
  }
}
</script>

<style scoped>
/* 基础样式已通过Tailwind CSS实现，这里可以添加额外的自定义样式 */
button:focus {
  outline: none;
}

a:focus {
  outline: none;
}
</style>